import React, { useEffect, useState } from 'react'
import { userRegisterFromApi } from '@/store/user/useUserStore'
import { Input, Button, message, Form } from 'antd'
import { UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
const UserAdd = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const navigate = useNavigate()
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <p>添加用户</p>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: '用户名不能为空',
            },
          ]}
        >
          <Input value={username} onChange={(e) => {
            setUsername(e.target.value)
          }}/>
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: '密码不能为空',
            },
          ]}
        >
          <Input.Password  value={password} onChange={(e) => {
            setPassword(e.target.value)
          }}/>
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit" onClick={() => {
            if (username != '' || password != '') {
              message.success('添加成功');
              userRegisterFromApi(username, password)
              navigate('/acl/users')
            }

          }}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default UserAdd
